<template>
	<div class="film after-div">
		<!-- 返回 -->
		<!-- <div class="goreturn">
			<van-icon name="arrow-left" />返回
		</div> -->
		<!-- 头部介绍 -->
		<div class="film-head">
			<!-- 图片 -->
			<div class="fh-img">
				<img :src="lists.poster">
			</div>
			<!-- 内容 -->
			<div class="fh-context">
				<!-- 标题 -->
				<div class="fhc-title">
					<div class="name">
						{{lists.name}}
					</div>
					<!-- 注意：即将上映没有这个评分 -->
					<div class="score" v-if="lists.grade!=null">
						{{lists.grade}} <span>分</span>
					</div>
				</div>
				<!-- 类型 -->
				<div class="fhc-type">
					{{lists.category}}
				</div>
				<!-- 上映时间 -->
				<div class="fhc-time">
					{{dateFormat(lists.premiereAt)}}上映
				</div>
				<!-- 地区 -->
				<div class="fhc-area">
					{{lists.nation}}| {{lists.runtime}}分钟
				</div>
				<!-- 介绍 -->
				<div class="fhc-introduce">
					{{lists.synopsis}}
				</div>
			</div>
		</div>

		<!-- 演职人员 -->
		<div class="film-items">
			<!-- 介绍标题 -->
			<div class="fitem-head">
				<div class="fh-title">
					演职人员
				</div>
			</div>
			<!-- 介绍人物 -->
			<div class="fitem-figure">
				<div class="fig-item" v-for="(v,i) in lists.actors" :key="i">
					<!-- 大头像 -->
					<div class="figpng">
						<img :src="v.avatarAddress">
					</div>
					<!-- 姓名 -->
					<div class="figname figs">
						{{v.name}}
					</div>
					<!-- 职位 -->
					<div class="figpost figs">
						{{v.role}}
					</div>
				</div>
			</div>
		</div>

		<!-- 剧照 -->
		<div class="film-items still-items">
			<!-- 介绍标题 -->
			<div class="fitem-head">
				<div class="fh-title">
					演职人员
				</div>
			</div>
			<!-- 介绍人物 使用swipter插件-->
			<div class="swiper-container fitem-figure">
				<div class="swiper-wrappe fig-item" v-for="(item,index) in lists.photos" id="figitem" :key="index">
					<!-- 大头像 -->
					<div class="swiper-slide figpng" @click="preview(index)">
						<img :src="item">
					</div>
				</div>
			</div>
		</div>

		<!-- 清除在线选择标签遮挡问题 -->
		<div class="after-div">

		</div>
		<!-- 在线选座 -->
		<div class="film-choose ">
			<a href="javascript:void(0)">在线选座</a>
		</div>
	</div>
</template>

<script>
	import timeFormats from '@/utility/formatTime'
	

	import {
		ImagePreview
	} from 'vant';

	export default {
		data() {
			return {
				/* 注意：这个为{}，否则会渲染报错，选择异步请求的生命钩子函数也很重要 */
				lists: {}, //储存后端数据
				imgs: [],  //储存剧照图片
			}
		},
		// 挂载请求数据
		mounted() {
			// 请求数据
			this.$axios.get('/filmInfo', {
				params: {
					filmId: this.$route.params.id,
				}
			}).then(res => {
				this.lists = res.film;
				this.imgs = res.film.photos
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			/* 解构 --前提名称要与抛出的一致 */
			...timeFormats,
			// 预览图片
			preview(index) {
				ImagePreview({
					images:this.imgs,
					startPosition: index,
					  closeable: true,
				});
			}
		},

	}
</script>

<style scoped="scoped" lang="scss">
	.film {
		background: #f1f1f1;

		/* 返回 */
		.goreturn {
			height: 80px;
			line-height: 80px;
		}

		/* 头部介绍 */
		.film-head {
			background: #fff;
			margin-bottom: 10px;

			/* 大图片 */
			.fh-img {
				height: 200px;
				overflow: hidden;

				img {
					width: 100%;
					transform: translateY(-32%);
				}
			}

			/* 内容盒子 */
			.fh-context {
				padding: 10px;
				box-sizing: border-box;
				text-align: left;

				>div {
					margin-top: 5px;
					font-size: 13px;
					color: #797d82;
				}

				.fhc-title {
					color: #191a1b;
					font-size: 18px;
					display: flex;
					justify-content: space-between;

					.score {
						color: #ffb232;
						font-style: italic;

						span {
							font-size: 12px;
							font-style: italic;
						}
					}
				}
			}
		}

		/* 演职人员 */
		.film-items {
			padding: 10px;
			margin-bottom: 10px;
			background: #fff;

			/* 介绍标题 */
			.fitem-head {
				.fh-title {
					text-align: left;
					padding: 10px 0;
				}
			}

			/* 介绍人物 */
			.fitem-figure {
				display: flex;
				overflow-x: scroll;

				&::-webkit-scrollbar {
					display: none;
					/* Chrome Safari */
				}

				.fig-item {
					width: 90px;
					margin-right: 15px;

					/* 大头像 */
					.figpng {
						width: 90px;
						height: 90px;
						overflow: hidden;

						img {
							width: 100%;
						}
					}

					.figs {
						margin-top: 5px;
						font-size: 13px;
						color: #191a1b;
						font-weight: 300;
						text-align: center;
					}

				}
			}

			/* 剧照 */

			#figitem {
				width: 150px;

				.figpng {
					width: 150px;

					img {
						width: 100%;
					}
				}
			}
		}

		/*在线选座  */
		.film-choose {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;

			a {
				display: block;
				width: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #fff;
				background-color: #ff6600;
			}
		}

		/* 清除在线选择标签遮挡问题 */
		.after-div {
			height: 50px;
		}
	}
</style>
